// 一、操作任意属性节点的方法（元素起始标签里面的属性）
let test=document.getElementById("test");
// （一）获取属性:
// 元素节点.getAttribute("属性名")
// console.log(test.getAttribute("class"));
// console.log(test.getAttribute("id"));
// console.log(test.getAttribute("name"));

// (二)设置属性：修改已经有的属性值或者新增属性
// 元素节点.setAttribute("属性名"，"属性值")
// test.setAttribute("class","xyz");
// test.setAttribute("id","qwe");
// test.setAttribute("name","qwe");

// （三）删除属性
// 元素节点.removeAttribute("属性名")
// test.removeAttribute("class");

// 二、操作元素类名（操作CSS的内部样式表和外部样式表）
// （一）获取元素所有类名
// console.log(test.classList);//返回值是伪数组对象
// console.log(test.className);//返回值是字符串

// // （二）增加元素类名
// test.classList.add("qwe");

// // （三）删除元素类名
// test.classList.remove("abc");

// // (四)修改元素类名（新增元素类名）
// test.className="hello";

// // (五)查看一个元素中是否包含某个类名,有就返回true，没有就返回false
// test.classList.contains("xyz");//false

// // (六)切换类名:如果元素节点中已经有该类名就删除，没有就添加
// test.classList.toggle("xyz");


// 三、点击事件
// let btn=document.getElementsByTagName("button")[0];
// let min=document.getElementsByClassName("min")[0];
// 鼠标点击哪个元素，就是那个元素调用onclick方法
// 元素节点.onclick=function(){
    // 点击元素之后，需要执行的操作

// }

// 对btn元素绑定点击事件（每个元素只能绑定一次相同的事件）
// btn.onclick=function(){
    // 方法一：
    // if(min.classList.contains("bg")){
    //     min.classList.remove("bg");

    // }else{
    //     min.classList.add("bg");
    // }

    // 方法二：是对方法一的简写
    // min.classList.toggle("bg");
// }


// 四、操作元素内容
// let list=document.getElementById("list");
//(一)获取元素内容
// 1.innerText:获取元素节点里面所有的文本内容；
// 返回值是字符串
// console.log(list.innerText);

// 2.innerHTML:获取元素节点里面所有的标签+文本内容；
// 返回值是字符串
// console.log(list.innerHTML);

// 3.textContent:获取元素节点里面所有的文本内容
// 返回值是字符串
// console.log(list.textContent);


//(二)修改元素内容
// list.innerText="hello world";

// list.innerHTML=`
//     <li>唐僧</li>
//     <li>悟空</li>
//     <li>八戒</li>
//     <li>沙僧</li>
// `

// 批量插入数据
// let arr=["唐僧","悟空","八戒","沙僧"];
// for(let i=0;i<arr.length;i++){
//     list.innerHTML+=`<li>${arr[i]}</li>`
// }

// 注意：每次使用innerHTML，都会让元素节点内部更新一次


// 五、操作CSS（通过DOM操作元素的行内样式表）
let list=document.getElementById("list");
console.log(list.style);
// 通过style属性获取到的都是行内样式
// 通过style属性修改的都是行内样式
list.style.color="green";
list.style.backgroundColor="yellow";
list.style["background-color"]="yellow";
list.style.fontSize="40px";
list.style.fontSize=40+"px";

// getComputedStyle(元素节点)：该函数主要用于获取元素节点的所有css样式
// 返回值是一个对象，只能读取，不能修改

// 权重值排序：
// ！important  10000
// 行内样式：1000
// ID选择器：100
// 类选择器、伪类选择器：10
// 元素选择器、伪元素选择器：1

let btn=document.getElementById("show");
let box=document.getElementsByClassName("box")[0];
btn.onclick=function(){
    // 方法一：（推荐）
    // box.classList.toggle("show");

    console.log(box.style.display);
    // 方法二：
    let x=getComputedStyle(box);
    if(x.display=="block"){
        box.style.display="none";
    }else{
        box.style.display="block";
    }
    
    
}

// let x=getComputedStyle(box);//返回值是css所有样式组成的对象
// console.log(x.display);
// x.display="none";